<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<%-- <link rel="stylesheet" href="${host_url}/css/app/common.css">
<link rel="stylesheet"  href="${host_url}/css/app/member_center_nwe.css">
<link rel="stylesheet" href="${host_url}/css/app/swiper.min.css">
<script src="${host_url}/js/app/swiper.min.js"></script> --%>
<link rel="stylesheet" href="/css/app/common.css"> 
<link rel="stylesheet"  href="/css/app/member_center_nwe.css">
<link rel="stylesheet" href="/css/app/swiper.min.css"> 
<script src="/js/app/swiper.min.js"></script>
<script src="/js/app/jquery.min.js"></script>

<title>会员升级</title>
<script type="text/javascript">	
/*代理级别以上会员 会员升级*/  
function fn_membershipUpgrade(e){
	window.webkit.messageHandlers.ios_open_page.postMessage('WKViewController:::url->${membershipupgrade_url}:::webTitle->会员升级:::isRefresh->YES');
	e.stopPropagation();
}
/*代理级别以上会员 会员升级*/  
function fn_membershipUpgrade_android(e){
	android.startUrl('会员升级','${membershipupgrade_url}');
	e.stopPropagation();
}
function fn_novip(){
	window.webkit.messageHandlers.ios_open_page.postMessage('WKViewController:::url->${novip_url}:::webTitle->友米券:::isRefresh->YES');
}
function fn_novip1(){
	window.webkit.messageHandlers.ios_open_page.postMessage('WKViewController:::url->${novip_url}?type=1:::webTitle->赠送折扣体验券:::isRefresh->YES');
}
/*总代理进阶总代理考核*/
function fn_MasterInfo(e) {
	window.webkit.messageHandlers.ios_open_page.postMessage('WKViewController:::url->${masterinfo_url}:::webTitle->会员升级:::isRefresh->YES');
	e.stopPropagation();
} 
/*总代理进阶总代理考核*/
function fn_MasterInfo_android(e) {
	android.startUrl('会员升级','${masterinfo_url}');
	e.stopPropagation();
} 
/*跳往商品详情*/
function fn_goGoodDetail(good_id) {
	window.webkit.messageHandlers.ios_open_page.postMessage('ProductViewController:::goodId->'+good_id);	
} 
/*跳往友米广场*/
function fn_goYoumiPiazza() {
	window.webkit.messageHandlers.ios_open_page.postMessage('MaterialListViewController');	
} 
/*跳往友米劵*/
function fn_goMemberTicket() {
	window.webkit.messageHandlers.ios_open_page.postMessage('CouponViewController');
} 
/*代理级别开始立即充值  */
function fn_GoMemberTicketRecharge() {
	window.webkit.messageHandlers.ios_open_page.postMessage('CouponChargeViewController');
}
/*跳往收支明细收入列表*/
function fn_goIncomePage() {
	window.webkit.messageHandlers.ios_open_page.postMessage('WKViewController:::url->${incomeandexpenseslog}:::webTitle->收支明细:::isRefresh->YES');
	
} 
/*友米乐会员专享*/
function fn_goExclusiveMembership() {
	window.webkit.messageHandlers.ios_open_page.postMessage('WKViewController:::url->${exclusiveMembership_url}:::webTitle->${app_name}会员专享:::isRefresh->YES');
	
} 
/*赠送折扣体验劵*/
function fn_giveDiscountLevel() {
	window.webkit.messageHandlers.ios_open_page.postMessage('WKViewController:::url->${giveDiscountLevel_url}:::webTitle->赠送折扣体验券:::isRefresh->NO');
	
} 
/*普通和高级会员 会员升级*/  
function fn_getMember(e){
	window.webkit.messageHandlers.ios_open_page.postMessage('WKViewController:::url->${levelupinfo_url}:::webTitle->会员升级:::isRefresh->YES');
	e.stopPropagation();
}
/*普通和高级会员 会员升级*/  
function fn_getMember_android(e){
	android.startUrl('会员升级','${levelupinfo_url}');
	e.stopPropagation();
}
/*隐藏弹窗*/
function fn_closePopup() {
	$("#popup_d").hide();
}
$(function(){
	if('${os}'=='ios'){
		window.webkit.messageHandlers.ios_title.postMessage('会员中心');
	}
	
 });
/*跳转网页 我的成长值*/  
function fn_gomyGrowthValue(){
	window.webkit.messageHandlers.ios_open_page.postMessage('WKViewController:::url->${mygrowthvalue_url}:::webTitle->我的成长值:::isRefresh->YES:::isShowHelpBtn->YES:::rightBtnUrl->${membergrowthvalue_url}:::rightBtnTitle->会员成长值');
}
</script>
</head>	
<body>
	<div class="main">
		<div style="padding:0 15px 15px;">
		 <c:if test="${member.identity==118 and member.level!=122}">
			<div class="topInner memberc${member.dic_other}">
		 </c:if>
		 <c:if test="${member.level==121 or member.level==122 or member.level==200 or member.level==201}">
			<div class="topInner memberc6">
		 </c:if>
				<div class="topArea">
					<div class="leftarea">
						<p>
							<c:choose>
							   <c:when test="${member.logo !=null}">  
							        <img src="${member.logo}" alt="" style="width:50px;height:50px;border-radius:50%;">
							   </c:when>
							   <c:otherwise> 
							     	<img src="${host_url}/img/u1031.png" alt="" style="width:50px;height:50px;border-radius:50%;">
							   </c:otherwise>
							 </c:choose>
						 </p>
					</div>
					<div class="rightarea">
						<p class="nickName">${member.nick_name}</p>
						<p class="member-entry">
							<c:if test="${member.dic_other==2}"><!-- 银卡 -->
								<img src="${host_url}/img/icon-silver.png" alt="" style="width:15px;vertical-align: middle;margin-right:4px;" >
								${member.level_name}
							</c:if>
							<c:if test="${member.dic_other==3}"><!-- 金卡 -->
								<img src="${host_url}/img/icon-gold.png" alt="" style="width:15px;vertical-align: middle;margin-right:4px;" >
								${member.level_name}
							</c:if>
							<c:if test="${member.dic_other==4}"><!-- 铂金卡-->
								<img src="${host_url}/img/icon-platinum.png" alt="" style="width:15px;vertical-align: middle;margin-right:4px;" >
								${member.level_name}
							</c:if>
							<c:if test="${member.dic_other==5}"><!-- 钻石卡 -->
								<img src="${host_url}/img/icon-diamonds.png" alt="" style="width:15px;vertical-align: middle;margin-right:4px;" >
								${member.level_name}
							</c:if>
							<c:if test="${member.level==121 or member.level==122 or member.level==200 or member.level==201}"><!--黑卡，合伙人，区域代理  ，市代理-->
								<img src="${host_url}/img/icon-black.png" alt="" style="width:15px;vertical-align: middle;margin-right:4px;" >
								${masterName}
							</c:if>
							<c:if test="${member.exp_state==1}">
								<fmt:parseDate value=" ${member.exp_date}" var="date" pattern="yyyy-MM-dd"/>  
			  					<span class="time">(<fmt:formatDate value="${date}" pattern="yyyy-MM-dd" />到期)</span> 
							</c:if>
						</p>
					</div>
					<c:if test="${exp_state==1}">
						<a href="#"><img src="${host_url}/img/icon_on_trial.png" alt=""></a>
					</c:if>
				</div>
				<div class="bottomArea">
					<c:if test="${'ios'==os}">
			        	<p onclick="fn_goIncomePage()"><span>${income_money}</span><span>获得收益(元)</span></p>
			        	<c:if test="${exp_state==1}">
							<p onclick="fn_novip()"><span>${use_tickets}</span><span>友米券</span></p>
						</c:if>
						<c:if test="${exp_state!=1}">
							<p onclick="fn_goMemberTicket()"><span>${use_tickets}</span><span>友米券</span></p>
						</c:if>
						
			        </c:if>
			    	<c:if test="${'android'==os}">
			        	<p onclick="android.startUrl('收支明细','${incomeandexpenseslog}')"><span>${income_money}</span><span>获得收益(元)</span></p>
						<c:if test="${exp_state==1}">
							<p onclick="android.startUrl('友米券','${novip_url}')"><span>${use_tickets}</span><span>友米券</span></p>
						</c:if>
						<c:if test="${exp_state!=1}">
							<p onclick="android.openPage('com.uniplaza.fenx.mmine.certificate.activity.MineCoinCertificateActivity')"><span>${use_tickets}</span><span>友米券</span></p>
						</c:if>
			        </c:if>
				</div>
			</div>
		</div>
		<c:if test="${member.level!=121 and member.level!=200 and member.level!=201}">
			<div class="current-wrap">
			 <!--黑卡  -->
			 <c:if test="${member.level==122}">
				 <c:if test="${member.plusminus_day==0}">
					<div class="data-plate data-plate-2">
			          <h4>${member.level_name}考核</h4>
			              <ul class="clearfix">
			                  <li class="clearfix two">
			                      <div class="leftArea wid-50"><p class=" leftArea bor-r"><span class="top">本月业绩</span><span id="month_consume1" class="bottom col">${member.second_month_consume}/${member.first_month_consume_need}</span></p></div>
			                </li>
			              </ul>
			              <div class="prompt">
					         <p>* 完成本月考核,下月可继续维持${member.level_name}等级。</p>
					         <p>* 考核未满，下月将降级至${expertLevel_name}。</p>
					      </div>
		          	</div>
	          	</c:if>
				 <c:if test="${member.plusminus_day>0}">
					<div class="data-plate">
				        <h4>${member.level_name}考核</h4>
				              <ul class="clearfix">
				                  <li class="clearfix">
				                      <div class="leftArea wid-50"><p class=" mar-b leftArea wid-50"><span class="top mar-l">本月业绩</span><span class="bottom mar-l">${member.second_month_consume}</span></p></div>
				                      <p class="mar-b leftArea wid-50"><span class="top mar-l">上月业绩</span><span class="bottom mar-l">${member.first_month_consume}</span></p>
				                  </li>
				                  <li class="clearfix two">
				                      <div class="leftArea wid-50"><p class=" leftArea bor-r"><span class="top">本月及上月业绩总和</span><span id="month_consume1" class="bottom col"><fmt:formatNumber value="${member.first_month_consume+member.second_month_consume}" pattern="#0" maxFractionDigits="0"/> / <fmt:formatNumber value="${member.second_month_consume_need}" pattern="#0" maxFractionDigits="0"/></span></p></div>
				                </li>
				              </ul>
			              <div class="prompt">
					         <p>* 完成本月考核,下月可继续维持${member.level_name}等级。</p>
					         <p>* 考核未满，下月将降级至${expertLevel_name}。</p>
				          </div>
				    </div>
			     </c:if>
			 </c:if>
				
			 <!-- 银，金，铂金卡 -->
			 <c:if test="${member.dic_other==2 or member.dic_other==3 or member.dic_other==4}">
			 <c:if test="${'ios'==os}">
				<div style="padding:0 15px;" onclick="fn_gomyGrowthValue()">
			 </c:if>
			 <c:if test="${'android'==os}">
				<div style="padding:0 15px;" onclick="android.startUrl('我的成长值','${mygrowthvalue_url}','会员成长值','${membergrowthvalue_url}','from_wode_jindu_web')">
			 </c:if>
				<p class="flex-layout">
				<span>当前等级：${member.level_name}</span>
				<c:if test="${'ios'==os}">
					<c:if test="${exp_state==1}"> 
						<span onclick="fn_getMember(event)"><a href="#">去升级</a></span>
					</c:if>
					<c:if test="${exp_state!=1}">
						<span onclick="fn_membershipUpgrade(event)"><a href="#">去升级</a></span>	
					</c:if>
				</c:if>
				<c:if test="${'android'==os}">
					<c:if test="${exp_state==1}">
						<span  onclick="fn_getMember_android(event)"><a href="javascript:">去升级</a></span>
					</c:if>
					<c:if test="${exp_state!=1}">
						<span  onclick="fn_membershipUpgrade_android(event)"><a href="javascript:">去升级</a></span>
					</c:if>
				
				</c:if>
				<div class="proportion">
				<p style="width:${(member.cur_ticket/member.next_ticket)*100}%;"></p>
				</div>	
				<p class="flex-layout list">
					<span>成长值</span>
					<span>${member.cur_ticket }/${member.next_ticket-member.cur_ticket}</span>
				</p>
				</p>
				</div>
			 </c:if>
			 <!-- 钻石卡 -->
			 <c:if test="${member.dic_other==5}">
				 <div style="padding:0 15px;">
					 <p class="flex-layout">
						<span>当前等级：${member.level_name}</span>
						<c:if test="${'ios'==os}">
							<c:if test="${exp_state==1}">
								<span onclick="fn_getMember(event)"><a href="#">去升级</a></span>
							</c:if>
							<c:if test="${exp_state!=1}">
								<span onclick="fn_MasterInfo(event)"><a href="#">去升级</a></span>
							</c:if>
						</c:if>
		    	        <c:if test="${'android'==os}">
			    	        <c:if test="${exp_state==1}">
								<span  onclick="fn_getMember_android(event)"><a href="javascript:">去升级</a></span>
							</c:if>
							<c:if test="${exp_state!=1}">
								<span onclick="fn_MasterInfo_android(event)"><a href="javascript:">去升级</a></span>
							</c:if>
						</c:if>
					 </p>
			     </div>
			 </c:if>
			</div>
		</c:if>
		<div class="member-serve">
			<h4>会员服务</h4>
			<div class="flex-layout">
				<p class="iconInner"><img src="${host_url}/img/icon_serve_1.png" alt=""></p>
				<p><span>充值友米券</span><span><fmt:formatNumber value="${member.rate*10}" pattern="#0.0" maxFractionDigits="1"/>折优惠</span></p>
				<c:if test="${'ios'==os}">
					<c:if test="${exp_state==1}">
						<p class="costInner" onclick="fn_novip()"><a href="#">去充值</a></p>
					</c:if>
					<c:if test="${exp_state!=1}">
						<p class="costInner" onclick="fn_GoMemberTicketRecharge()"><a href="#">去充值</a></p>
					</c:if>
				</c:if>
				<c:if test="${'android'==os}">
					<c:if test="${exp_state==1}">
						<p class="costInner" onclick="android.startUrl('友米券','${novip_url}')"><a href="javascript:">去充值</a></p>
					</c:if>
					<c:if test="${exp_state!=1}">
						<p class="costInner" onclick="android.openPage('com.uniplaza.fenx.mmine.certificate.activity.DeliveryRechargeActivity')"><a href="javascript:">去充值</a></p>
					</c:if>
				</c:if>
			</div>
			<div class="flex-layout">
				<p class="iconInner"><img src="${host_url}/img/icon_serve_2.png" alt=""></p>
				<p><span>邀请好友加入会员</span><span>可获得150元现金奖励</span></p>
				<c:if test="${'ios'==os}">
					<c:if test="${exp_state==1}">
						<p class="costInner" onclick="fn_novip1()"><a href="#">去邀请</a></p>
					</c:if>
					<c:if test="${exp_state!=1}">
						<p class="costInner" onclick="fn_giveDiscountLevel()"><a href="#">去邀请</a></p>
					</c:if>
					
				</c:if>
				<c:if test="${'android'==os}">
					<c:if test="${exp_state==1}">
						<p class="costInner" onclick="android.startUrl('赠送折扣体验券','${novip_url}?type=1')"><a href="javascript:">去邀请</a></p>
					</c:if>
					<c:if test="${exp_state!=1}">
						<p class="costInner" onclick="android.startUrl('赠送折扣体验券','${giveDiscountLevel_url}')"><a href="javascript:">去邀请</a></p>
					</c:if>
				</c:if>
			</div>
			<div class="flex-layout">
				<p class="iconInner"><img src="${host_url}/img/icon_serve_3.png" alt=""></p>
				<p><span>分享赚</span><span>必推好货，分享即赚</span></p>
				<c:if test="${'ios'==os}">
					<p class="costInner" onclick="fn_goYoumiPiazza()"><a href="#">去分享</a></p>
				</c:if>
				<c:if test="${'android'==os}">
					<p class="costInner" onclick="android.openPage('com.uniplaza.fenx.material.activity.DifferentialDaraActivity')"><a href="javascript:">去分享</a></p>
				</c:if>
			</div>
		</div>

		<div class="banner">
			<h4 class="clearfix">
				<p class="leftArea">会员专享价</p>
				<c:if test="${'ios'==os}">
					<p class="more rightArea" onclick="fn_goExclusiveMembership()">查看全部</p>
				</c:if>
				<c:if test="${'android'==os}">
					<p class="more rightArea" onclick="android.startUrl('${app_name}会员专享','${exclusiveMembership_url}')">查看全部</p>
				</c:if>
			</h4>
			<div class="swiper-container">
			    <div class="swiper-wrapper">
			    <c:forEach items="${goodList_d}" var="c">
			      	<div class="swiper-slide flex-layout2">
			      	<c:forEach items="${c.goodList_p}" var="s">
			      	<c:if test="${'ios'==os}">
						<div onclick="fn_goGoodDetail(${s.good_id})">
					</c:if>
			      	<c:if test="${'android'==os}">
						<div onclick="android.startGoodsDetail(${s.good_id})">
					</c:if>
								<img src="${s.img}" alt="">
								<p class="goodName">${s.name}</p>
								<p style="color:#9a9a9a;text-decoration: line-through;font-size:12px;">非会员￥${s.default_price}</p>
							<c:if test="${s.ticket!=0}">
								<p style="color:#f34545;font-size:16px;">￥${s.member_price}</p>
							</c:if>
							<c:if test="${s.ticket==0}">
								<p style="color:#f34545;font-size:16px;">￥${s.default_price}</p>
							</c:if>
						</div>
					 </c:forEach>
			      	</div>
			      </c:forEach>
			    </div>
			    <!-- Add Pagination -->
			    <div class="swiper-pagination"></div>
			</div>
		</div>

		<div class="exchange">
			<h4 class="clearfix">
				<p class="leftArea" style="font-size:16px;">会员兑换</p>
				<p class="rightArea">可使用友米券&nbsp;<span style="color:#f34545;">${use_tickets}</span></p>
			</h4>
			<c:forEach items="${goodList_t}" var="c">
				<c:if test="${'ios'==os}">
					<div class="flex-layout" onclick="fn_goGoodDetail(${c.good_id})">
						<p class="iconInner"><img src="${c.img}" alt="" style="width:80px;"></p>
						<div style="position:relative;">
							<p><span>${c.name}</span></p>
							<p style="position:absolute;right:0;top:50%;margin-top:-12px;"><span><a href="#">立即兑换</a></span></p>
							<p class="costInner clearfix"><span class="leftArea">${c.ticket}券</span>
							</p>
						</div>
					</div>
				</c:if>
				<c:if test="${'android'==os}">
					<div class="flex-layout" onclick="android.startGoodsDetail(${c.good_id})">
						<p class="iconInner"><img src="${c.img}" alt="" style="width:80px;"></p>
						<div>
							<p><span>${c.name}</span></p>
							<p class="costInner clearfix"><span class="leftArea">${c.ticket}券</span>
						    </span><a href="javascript:" class="rightArea">立即兑换</a></span>
							</p>
						</div>
					</div>
				</c:if>
			</c:forEach>
		</div>
	</div>
	<c:if test="${popup_info.exp_state==1 and popup_info.state=='Y'}">
		<div class="popup-3" id="popup_d">
			<div class="content">
				<h4 style="color:#898989;">
					<img src="${popup_info.level_logo_img}" alt="" class="icon-overdue" >
					${popup_info.popup_level_name}
					<span>${popup_info.popup_rate} 折购物折扣权限</span>
				</h4>
				<p class="term">${popup_info.popup_str} </p>
				<p class="close"><img src="/img/icon_close.png" alt="" onclick="fn_closePopup()"></p>
			</div>
		</div>
	</c:if>
    <script>
	    var swiper = new Swiper('.swiper-container', {
	      spaceBetween: 30,
	      centeredSlides: true,
	      pagination: {
	        el: '.swiper-pagination',
	        clickable: true,
	      },
	    });
    </script>
</body>
</html>